<template>
  <el-container class="">
    <el-header style="text-align: right; font-size: 12px">
      <div class="toolbar">

      </div>
    </el-header>

    <el-main>
      <el-scrollbar>
        <el-table :data="list"
                  empty-text="暂无数据">
          <el-table-column width="100">
            <template #default="">
              <p>资讯标题</p>
            </template>
          </el-table-column>
          <!-- 资讯标题 -->
          <el-table-column width="540">
            <template #default="scope">
              <p v-show="biao==false">{{ scope.row.title }}</p>
              <el-input v-model="title"
                        maxlength="24"
                        show-word-limit
                        style="width: 440px"
                        clearable
                        v-show="biao==true" />
            </template>
          </el-table-column>

          <el-table-column label="操作"
                           width="120">
            <template #default="">
              <el-button size="small"
                         v-if="biao==false"
                         @click="handleEditpass(0)">编辑</el-button>
              <el-button size="small"
                         v-if="biao==true"
                         @click="queding(0)">确定</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-table :data="list">
          <el-table-column width="100">
            <template #default="">
              <p>资讯内容</p>
            </template>
          </el-table-column>
          <!-- 资讯内容 -->
          <el-table-column width="540">
            <template #default="scope">
              <p v-show="con==false">{{ scope.row.content }}</p>
              <el-input v-model="content"
                        v-show="con==true"
                        maxlength="160"
                        show-word-limit
                        style="width: 440px"
                        autosize
                        type="textarea"
                        placeholder="Please input" />
            </template>
          </el-table-column>

          <el-table-column width="120">
            <template #default="">
              <el-button size="small"
                         v-if="con==false"
                         @click="handleEditpass(1)">编辑</el-button>
              <el-button size="small"
                         v-if="con==true"
                         @click="queding(1)">确定</el-button>

            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </el-main>

  </el-container>
</template>



<script setup>
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from '@/axios'
let list = ref([])
//储存标题
let title = ref('tyrtyert')
let biao = ref(false)
//储存编辑内容
let content = ref('')
let con = ref(false)

//编辑
const handleEditpass = (index) => {
  if (index == 0) {
    biao.value = true
    // console.log(title.value)
  } else if (index == 1) {
    con.value = true
  }
}
let queding = (index) => {
  if (index == 0) {
    biao.value = false
  } else if (index == 1) {
    con.value = false
  }
  axios
    .post('/xiuzixun', { title: title.value, content: content.value })
    .then((d) => {
      if (d == '每日资讯修改成功！') {
        ElMessage({
          message: `修改成功`,
          type: 'success'
        })
      }
      axios
        .get('/zixun')
        .then((d) => {
          //过滤数据
          list.value = d
          title.value = d[0].title
          content.value = d[0].content
          // console.log(userlist.value)
        })
        .catch((err) => console.log(err))
    })
    .catch((err) => console.log(err))
}
onMounted(() => {
  axios
    .get('/zixun')
    .then((d) => {
      //过滤数据
      list.value = d
      title.value = d[0].title
      content.value = d[0].content
      // console.log(userlist.value)
    })
    .catch((err) => console.log(err))
})
</script>

<style scoped lang="less">
.shuru {
  width: 100%;
  text-align: center;
}
.sousuo {
  width: 60px;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  margin-left: 10px;
  padding: 0 10px;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.layout-container-demo .el-header {
  position: relative;
  background-color: #cdbf62;
  color: var(--el-text-color-primary);
}
</style>

